<template>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="_currentPage"
        :page-sizes="[10, 50, 100]"
        :page-size="_pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    >
    </el-pagination>
</template>

<script>
export default {
    props: {
        currentPage: {
            type: Number,
        },
        total: {
            type: Number,
        },
        pageSize: {
            type: Number,
            default: 10,
        },
    },
    data() {
        return {}
    },
    // watch: {
    //     currentPage(page) {
    //         this.$emit('update:currentPage', page)
    //     },
    // },
    computed: {
        _currentPage: {
            get() {
                return this.currentPage
            },
            set(page) {
                this.$emit('update:currentPage', page)
            },
        },
        _pageSize: {
            get() {
                return this.pageSize
            },
            set(size) {
                this.$emit('update:pageSize', size)
            },
        },
    },
    created() {},
    methods: {
        handleSizeChange(size) {
            this.$emit('getList')
        },
        handleCurrentChange(page) {
            this.$emit('getList')
        },
    },
}
</script>

<style lang="less" scoped></style>
